<script setup>
import { onMounted, onUnmounted } from 'vue';
import { ElConfigProvider, ElMessage } from 'element-plus';
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
import { setupNetworkMonitor } from '@/utils/network';
import axios from 'axios';

let cleanupNetworkMonitor;

// 使用新的ping接口检查API连接
const checkApiConnection = async () => {
  try {
    const response = await axios.get(`${import.meta.env.VITE_API_BASE_URL}/test/ping`, {
      timeout: 5000
    });
    
    // 根据实际响应结构进行检查
    if (response.data && response.data.code === 200 && response.data.data && response.data.data.status === 'UP') {
      console.log('API连接正常:', response.data);
      return true;
    } else {
      console.warn('API响应异常:', response.data);
      return false;
    }
  } catch (error) {
    console.error('API连接检查失败:', error);
    return false;
  }
};

onMounted(async () => {
  // 检查API连接
  const isApiConnected = await checkApiConnection();
  
  if (!isApiConnected) {
    ElMessage.warning({
      message: '无法连接到服务器，部分功能可能不可用',
      duration: 5000
    });
  } else {
    ElMessage.success({
      message: '服务器连接正常',
      duration: 3000
    });
  }
  
  // 设置网络监控
  cleanupNetworkMonitor = setupNetworkMonitor(
    async () => {
      const reconnected = await checkApiConnection();
      if (reconnected) {
        ElMessage.success('网络已恢复连接');
      }
    },
    () => ElMessage.error('网络连接已断开，请检查您的网络设置')
  );
});

onUnmounted(() => {
  if (cleanupNetworkMonitor) {
    cleanupNetworkMonitor();
  }
});
</script>

<template>
  <el-config-provider :locale="zhCn">
    <router-view />
  </el-config-provider>
</template>

<style>
body {
  margin: 0;
  padding: 0;
  font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  width: 100%;
  overflow-x: hidden; /* 防止水平滚动条 */
  max-width: 100%; /* 确保不超过视口宽度 */
}

#app {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  max-width: 100vw; /* 限制最大宽度为视口宽度 */
}

/* 移除所有元素的焦点轮廓 */
*:focus {
  outline: none !important;
}

/* 移除Element Plus组件的焦点样式 */
.el-dropdown:focus-visible,
.el-dropdown-link:focus-visible,
.el-avatar:focus-visible,
.el-button:focus-visible {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

/* 特别处理头像组件 */
.el-avatar {
  border: none !important;
  outline: none !important;
}
</style>
